import Layout from './Layout'
import { Col, Row } from 'antd'
import { useParams } from 'react-router-dom'
import {useEffect} from 'react'
import {useDispatch, useSelector} from 'react-redux'
import {get_product_by_id} from '../../store/actions/product'
import ProductItem from './ProductItem'
function Product() {
  const { productId } = useParams()
  const dispatch = useDispatch()
  const product = useSelector(state=>state.product)
  useEffect(()=>{
    dispatch(get_product_by_id({productId}))
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  return (
    <Layout title={product.name} subTitle="带我走吧">
      <Row>
        <Col span="18">
          {
            Object.keys(product).length > 0 
            && 
            <ProductItem 
              product={product} 
              imgStyle={{width:"50%",margin:"0 auto"}} 
              showView={false}
            />
          }
        </Col>
        <Col span="6">right</Col>
      </Row>
    </Layout>
  )
}

export default Product